// http://localhost:3000/Nebula
import React from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import Bank from '../Bank';
import BankCards from './BankCards';
import BankCards1 from './BankCards1';
import BankCards2 from './BankCards2';
import { useWallet } from 'use-wallet';
import Button from '../../components/Button';
import styled from 'styled-components';

import banner_nebula from '../../assets/image/banner_nebula.png';
import h5banner_nebula from '../../assets/image/h5banner_nebula.png';
import config from '../../config';
import LaunchCountdown from '../../components/LaunchCountdown';

import useBanks from '../../hooks/useBanks';
import useBasisCash from '../../hooks/useBasisCash';

const Banks: React.FC = () => {
  const { path } = useRouteMatch();
  const { account, connect } = useWallet();

  const [banks] = useBanks();
  const basisCash = useBasisCash();
  const activeBanks = banks.filter((bank) => !bank.finished  );

  const [childrenMsg,setChildrenMsg] = React.useState(0);
  const [childrenMsg1,setChildrenMsg1] = React.useState(0);
  const [childrenMsg2,setChildrenMsg2] = React.useState(0);

//   const functionqwe =  (): String => {
//     var b = parseInt().toString();
//     var len = b.length;
//     if (len <= 3) { return b; }
//     var r = len % 3;
//     return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") : b.slice(r, len).match(/\d{3}/g).join(",");
// }

  return (
    <Switch>
      <Page>
        <Route exact path={path}>
          {/* <PageHeader
            icon={<img
            src={banner_nebula}
            alt='logo'
            width={1920}
          />}
            title=""
            subtitle=""
          /> */}
          <StyleDiv1>
        <img
          src={banner_nebula}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
        {(childrenMsg|| childrenMsg1 || childrenMsg2)
          ?
          <div style={{color: '#fff',textAlign: 'center', marginTop: 8}}>Realtime Total Value Locked: { (childrenMsg+childrenMsg1+childrenMsg2).toLocaleString()} $</div> 
          :
          <></>
        }
         
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={h5banner_nebula}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>
          {/* <LaunchCountdown
            deadline={config.bondLaunchesAt}
            description=""
            descriptionLink=""
        /> */}
          {!!account ? (
            <Center2>
              <BankCards counts={childrenMsg} setCount={(n:number)=>setChildrenMsg(childrenMsg+n)} />
              <BankCards1 counts={childrenMsg1} setCount={(n:number)=>setChildrenMsg1(childrenMsg1+n)}/>
              <BankCards2 counts={childrenMsg2} setCount={(n:number)=>setChildrenMsg2(childrenMsg2+n)}/>
            </Center2>
          ) : (
            <Center>
              <Button onClick={() => connect('injected')} text="Unlock Wallet" />
            </Center>
          )}
        </Route>
        <Route path={`${path}/:bankId`}>
          <Bank />
        </Route>
      </Page>
    </Switch>
  );
};

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  @media (max-width: 768px) {
    display: none;
  }
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const Center = styled.div`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
`;

const Center2 = styled.div`
  @media (max-width: 768px) {
    width: 100%;
  }
`;

export default Banks;
